<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            /* 盒子阴影    参数1：x轴上的偏移量  参数2：y轴上的偏移量 参数3：模糊值  参数4：颜色 */
            box-shadow: 5px 5px 8px red;
        }
        .boxx{
            margin-top: 200px;
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            box-shadow: 5px 0px 8px red,
                        -5px 0px 8px yellow,
                        0px -5px 8px black,
                        0px 5px 8px blue,
        }
    </style>
</head>
<body>
    <!-- range:范围 相当于是一个进度条 -->
    <p>
        <input type="range" max="100" min="0" value="0">
        <span>0</span> 
    </p>
    <div class="box"></div>
    <div class="boxx"></div>
    <script>
        // 获取元素
        var int = document.querySelector("input")
        var sp = document.querySelector("span")
        var box = document.getElementsByClassName("box")[0]
        int.onchange = function () {
            // 这个 这是 ---指代的就是对应的获取的元素
            // console.loh(this);
            // innerHTML 写入数据
            sp.innerHTML = this.value
            box.style.boxShadow = "5px 5px " + this.value + "px red"
        }
    </script>
</body>
</html>